<!--
 * @author: Goalias
 * @since: 2025-01-06
-->
<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { userMonitorApi } from '@/apis/MonitorApi';
import { abilityMonitorApi } from '@/apis/MonitorApi'
import { address } from '@/apis/types/Monitor';
import { basic } from '@/apis/types/Monitor';
import { useUserStore } from '@/store/userStore';
import NumberTicker from '@/components/ui/NumberTicker';

const basicInfo = ref<basic>();
const addressInfo = ref<address>();
const userStore = useUserStore();
const runningTime = ref({ day: 0, hour: 0, minute: 0, second: 0 });

function timeDifference(dateString: string): { day: number, hour: number, minute: number, second: number } {
    const givenDate = new Date(dateString);
    const currentDate = new Date();

    // 计算时间差（以毫秒为单位）
    const timeDifference = currentDate.getTime() - givenDate.getTime();

    const day = Math.floor(timeDifference / (1000 * 60 * 60 * 24));
    const hour = Math.floor((timeDifference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));   
    const minute = Math.floor((timeDifference % (1000 * 60 * 60)) / (1000 * 60));
    const second = Math.floor((timeDifference % (1000 * 60)) / 1000);
    return { day, hour, minute, second };
}

function updateRunningTime() {
  runningTime.value.second++;
  if (runningTime.value.second >= 60) {
    runningTime.value.second = 0;
    runningTime.value.minute++;
  }
  if (runningTime.value.minute >= 60) {
    runningTime.value.minute = 0;
    runningTime.value.hour++;
  }
  if (runningTime.value.hour >= 24) {
    runningTime.value.hour = 0;
    runningTime.value.day++;
  }
}

onMounted(() => {
    abilityMonitorApi.getAddress().then((res) => {
        addressInfo.value = res.data;
    });
    userMonitorApi.getBasicMonitor().then((res) => {
        basicInfo.value = res.data;
        runningTime.value = timeDifference(basicInfo.value.startTime);
        setInterval(updateRunningTime, 1000);
    });
});

</script>

<template>
<div class="basic-container">
    <el-card>
        <el-descriptions title="系统概况" :column="2" >
            <el-descriptions-item label="当前管理员>">{{ userStore?.userInfo?.username }}</el-descriptions-item>
            <el-descriptions-item label="当前IP地址>">{{ addressInfo?.ip }} : {{ addressInfo?.address }}</el-descriptions-item>
            <el-descriptions-item label="Java版本>">{{ basicInfo?.javaVersion }}</el-descriptions-item>
            <el-descriptions-item label="Java虚拟机>">{{ basicInfo?.javaVMName }}</el-descriptions-item>
            <el-descriptions-item label="Java虚拟机版本>">{{ basicInfo?.javaVMVersion }}</el-descriptions-item>
            <el-descriptions-item label="MySQL驱动>">{{ basicInfo?.mysqlDriver }}</el-descriptions-item>
            <el-descriptions-item label="MySQL版本>">{{ basicInfo?.mysqlVersion }}</el-descriptions-item>
            <el-descriptions-item label="Redis版本>">{{ basicInfo?.redisVersion }}</el-descriptions-item>
            <el-descriptions-item label="启动时间>">{{ basicInfo?.startTime }}</el-descriptions-item>
            <el-descriptions-item label="运行时间>">
                <NumberTicker :value="runningTime.day" direction="up" :delay="2" :decimal-places="0" />天
                <NumberTicker :value="runningTime.hour" direction="up" :delay="2" :decimal-places="0" />小时
                <NumberTicker :value="runningTime.minute" direction="up" :delay="2" :decimal-places="0" />分钟
                <NumberTicker :value="runningTime.second" direction="up" :delay="2" :decimal-places="0" />秒
            </el-descriptions-item>
        </el-descriptions>
    </el-card>
</div>
</template>

<style scoped>
:deep(.el-card) {
    margin-top: 15vh;
    margin-left: 30px;
    margin-right: 30px;
    box-shadow: 10px 10px 60px rgba(6, 218, 229, 1);
}

:deep(.el-descriptions__label) {
    color: var(--theme-color);
}

:deep(.el-descriptions__body .el-descriptions__table .el-descriptions__cell) {
    box-sizing: border-box;
    font-size: 14px;
    font-weight: normal;
    line-height: 40px;
    text-align: left;
    font-size: large;
    background-color: rgb(216, 255, 236);
}

</style>
